<template>
	<view class="page">
		<view class="header">
			<image @click="back" src="/static/image/login/left.png" mode=""></image>
			<text>历史行程</text>
		</view>
		<view style="height: 176rpx;">
			
		</view>
		<scroll-view scroll-y >
			<view class="cont">
				<view v-for="(item, index) in list" :key="index" class="historyitem">
					<view class="title">
						<view class="left">
							<text class="star">{{item.start}}</text>
							<text class="split"></text>
							<text class="day">{{item.day}}天</text>
							<text class="split"></text>
							<text class="end">{{item.end}}</text>
						</view>
						<view class="right">
							<image src="/static/image/mine/share.png" mode=""></image>
							<image src="/static/image/mine/map.png" mode=""></image>
						</view>
					</view>
					<text class="time">{{item.time}}</text>
					<view class="bottomhis">
						<text style="margin-right: 40rpx;">地点：{{item.address}}个</text>
						<text style="margin-right: 40rpx;">步行：{{item.step}}</text>
						<text style="margin-right: 40rpx;">车程：{{item.car}}</text>
					</view>
				</view>

	<!-- 			<view class="item">
					<text class="left">头像</text>
					<view class="right">
						<image class="avator" src="/static/image/home/avator.png" mode=""></image>
						<text class="name">Nettie Wagner</text>
					</view>
				</view> -->
		<!-- 		<view class="item">
					<view class="left">
						<image src="/static/image/home/avator.png" mode=""></image>
						<text class="name111">Nettie Wagner</text>
						<text class="tag">当前登录</text>
					</view>
					<view class="right">
						<text>注销账号</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<image src="/static/image/home/avator.png" mode=""></image>
						<text class="name111">Nettie Wagner</text>
					</view>
					<view class="right">
						<text>注销账号</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<image src="/static/image/home/avator.png" mode=""></image>
						<text class="name111">Nettie Wagner</text>
					</view>
					<view class="right">
						<text>注销账号</text>
					</view>
				</view> -->
<!-- 				<view class="item">
					<text class="left">性别</text>
					<view class="right">
						<text>男</text>
						<image class="btn" src="/static/image/mine/right.png" mode=""></image>
					</view>
				</view> -->
	<!-- 			<view class="item">
					<text class="left">生日</text>
					<view class="right">
						<text>1990-02-22</text>
						<image class="btn" src="/static/image/mine/right.png" mode=""></image>
					</view>
				</view> -->
<!-- 				<view class="firsttitle">
					<text class="aaa">* </text>
					<text class="bbb">问题和意见</text>
				</view>
				<view class="textarea1">
					<textarea v-model="suggest"
					class=""
					 placeholder="请输入您的需求或者意见（如获取验证码失败，请填写当前注册的手机号码）"
					 placeholder-class="textareaplaceholder"
					 />
				</view>
				<view class="subtitle">
					<text>联系方式</text>
				</view>
				<view class="textarea2">
					<input type="text" @input="handleConcat" placeholder="请输入您的电子邮箱或手机号，以便回复" />
				</view> -->
				<!-- <button>提交</button> -->
			</view>
<!-- 			<view class="content">
				<view class="content-top">
					<view class="content-top-one">
						<image src="/static/image/travel/position.png" mode=""></image>
						<text>{{locationData.title}}</text>
					</view>
					<text class="content-top-two">{{locationData.desc}}</text>
				</view>
				<view v-if="step == 1" class="content-comment">
					<view class="comment-clock">
						<text class="comment-clock-left">共有{{locationData.count}}人打卡</text>
						<view @click="daka" class="comment-clock-right">
							<image src="/static/image/travel/clockin.png" mode=""></image>
							<text>打卡</text>
						</view>
					</view>
					<view class="commentbox">
						<view class="commentboxitem" v-for="(item, index) in list" :key="index">
							<view class="top">
								<image :src="item.src" mode=""></image>
								<text>{{item.name}}</text>
							</view>
							<view class="middle">
								<text >
									{{item.desc}}
								</text>
							</view>
							<view class="end">
								<image v-for="(itm, idx) in item.poster" :key="idx"
								:src="itm" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="daka">
					<text class="dakatitle">打卡信息</text>
					<view class="textarea11">
						<textarea v-model="txt"
						class=""
						 placeholder="请在此处输入文字信息"
						 placeholder-class="textareaplaceholder"
						 />
					</view>
					
					<view class="imgoperate">
						<view class="img" v-for="(itm, idx) in showImg"  :key="idx">
							<image :src="itm" mode=""></image>
						</view>
						
						<image class="add" @click="add" src="/static/image/travel/addpic.png" mode=""></image>
					</view>
					
					<button class="btn">打卡</button>
				</view>

			</view> -->
		</scroll-view>
		<view class="" style="height: 190rpx;">
		</view>
		<tabbar selected="4"></tabbar>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue";
	import people from '../../static/image/travel/people.png'
	import listItem from '../../static/image/travel/list-item.png'
	export default {
		components: {
			tabbar: tabbar,
		},
		data() {
			return {
				suggest: '',
				concat: '',
				txt: '',
				showImg: [people],
				step: 2, // 1列表 2添加
				locationData: {
					title: '冰心故居',
					desc: '福建省福州市鼓楼区杨桥东路17号',
					count: 2334,
					
				},
				list: [
					
					{						day: 3,						start: '深圳',						end: '福州',						time: '2025年03月01日-2025年03月',						address: 7,						step: '2h35min',						car: '3h25min'					},
					{
						day: 3,
						start: '深圳',
						end: '福州',
						time: '2025年03月01日-2025年03月',
						address: 7,
						step: '2h35min',
						car: '3h25min'
					},
					{
						day: 3,
						start: '深圳',
						end: '福州',
						time: '2025年03月01日-2025年03月',
						address: 7,
						step: '2h35min',
						car: '3h25min'
					},
					{
						day: 3,
						start: '深圳',
						end: '福州',
						time: '2025年03月01日-2025年03月',
						address: 7,
						step: '2h35min',
						car: '3h25min'
					},
				// {
				// 	name: '岩瑶妹',
				// 	src: people,
				// 	desc: '在项目伊始时做一个用户研究的作用好过于在项目落地后再对50个用户进行测试',
				// 	poster: [
				// 		listItem, listItem,listItem
				// 	]
				// },
				// {
				// 	name: 'Chad Ortiz',
				// 	src: people,
				// 	desc: '有功无过是短暂的，无功有过是行不通的，有功有过是最好的',
				// 	poster: [
				// 		listItem, listItem,listItem, listItem, listItem,
				// 	]
				// },
				// {
				// 	name: 'Margaret Owen',
				// 	src: people,
				// 	desc: '不要在你家里放一件你不知其用，或你认为不美的东西',
				// 	poster: [
				// 		listItem, listItem,listItem, listItem
				// 	]
				// },
				// {
				// 	name: 'Ruby Pena',
				// 	src: people,
				// 	desc: '不要在你家里放一件你不知其用，或你认为不美的东西',
				// 	poster: [
				// 		listItem,
				// 	]
				// }
				]
			}
		},
		methods: {
			handleConcat(event) {
				this.suggest = event.target.detail
			},
			back() {
				uni.navigateBack()
			},
			daka() {
				this.step = 2
			},
			add() {
				uni.chooseImage({
				        count: 5, // 默认9, 设置图片的最大选择数，设置为1表示只选择一张图片
				        sourceType: ['camera'], // 可选前置或后置，默认['album', 'camera']
				        success: (res) => {
				          this.showImg = res.tempFilePaths || []; // 获取选中的文件列表，取第一张图片的路径
				        },
				        fail: (err) => {
				          console.error('调用图片失败',err);
				        }
				      });
			},
		}
	}
</script>

<style lang="less" scoped>
.page {
	background: #EEF0F4;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	.header {
		height: 176rpx;
		background-color: #fff;
		// padding-top: 108rpx;
		display: flex;
		justify-content: center;
		// align-items: center;
		position: fixed;
		width: 100%;
		z-index: 1;
		image {
			position: absolute;
			left: 32rpx;
			bottom: 24rpx;
			width: 34rpx;
			height: 34rpx;
		}
		text {
			position: absolute;
			bottom: 16rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #221715;
			line-height: 51rpx;
		}
	}
	.content {
		flex: 1;
		margin: 20rpx;
		// padding-top: 176rpx;
		background-color: #FFF;
		
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		.content-top {
			padding: 30rpx 30rpx 30rpx 30rpx;
			border-bottom: 2rpx solid #F3F5F7;
			.content-top-one {
				display: flex;
				align-items: center;
				height: 48rpx;
				image {
					width: 46rpx;
					height: 40rpx;
					margin-left: 6rpx;
					margin-bottom: 20rpx;
				}
				text {
					font-weight: 500;
					font-size: 34rpx;
					color: #221715;
					line-height: 48rpx;
					margin-left: 16rpx;
				}
			}
			.content-top-two {
				font-weight: 400;
				font-size: 28rpx;
				color: #777777;
				line-height: 40rpx;
				
			}
		}
		.content-comment {
			padding: 36rpx 30rpx;
			.comment-clock {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				.comment-clock-left {
					font-weight: bold;
					font-size: 30rpx;
					color: #1A1A1A;
					line-height: 42rpx;
				}
				.comment-clock-right {
					width: 144rpx;
					height: 56rpx;
					background: linear-gradient( 270deg, #0187F5 0%, #2DCCC2 100%);
					border-radius: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 32rpx;
						height: 32rpx;
					}
					text {
						margin-left: 14rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
					}
				}
			}
			.commentbox {
				.commentboxitem {
					margin-bottom: 20rpx;
					border-bottom: 2rpx solid #F3F5F7;;
					.top {
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
						image {
							width: 48rpx;
							height: 48rpx;
							border-radius: 16rpx;
							margin-right: 16rpx;
						}
						text {
							font-weight: 400;
							font-size: 28rpx;
							color: #1A1A1A;
							line-height: 40rpx;
						}
					}
					.middle {
						margin-bottom: 20rpx;
						text {
							font-weight: 400;
							font-size: 28rpx;
							color: #595959;
							line-height: 40rpx;
						}
					}
					.end {
						margin-bottom: 20rpx;
						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 8rpx;
							margin-right: 16rpx;
						}
					}
				}
			}
		}
		.daka {
			padding: 36rpx 30rpx;
			.dakatitle {
				font-weight: 500;
				font-size: 30rpx;
				color: #1A1A1A;
				line-height: 42rpx;
				margin-bottom: 20rpx;
			}
			.textarea11 {
				// width: 80%;
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				// width: 400rpx;
				// height: 200rpx;
				background: #F5F7F9;
				
				// padding: 20rpx;\
				textarea {
					padding: 20rpx;
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}
			.textareaplaceholder {
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				// padding: 20rpx;
			}
			.imgoperate {
				display: flex;
				margin-bottom: 80rpx;
				.img {
					width: 140rpx;
					height: 140rpx;
					margin-right: 24rpx;
					image {
						width: 140rpx;
						height: 140rpx;
					}
				}
				.add {
					width: 140rpx;
					height: 140rpx;
				}
			}
			.btn {
				margin-top: 80rpx;
				margin: 0 20rpx;
				height: 88rpx;
				background: #006FF6;
				border-radius: 44rpx;
			}
		}
	}
}

.cont {
	// width: 710rpx;
	margin: 20rpx;
	// height: 682rpx;
	// background: #FFFFFF;
	border-radius: 16rpx;
	// padding: 20rpx;
	.firsttitle {
		
		margin-bottom: 20rpx;
		.aaa {
			font-weight: bold;
			font-size: 30rpx;
			color: #E80000;
			line-height: 42rpx;
			padding-right: 10rpx;
			padding-top: 10rpx;
		}
		.bbb{
			font-weight: bold;
			color: #1A1A1A;
			font-size: 30rpx;
			line-height: 42rpx;
		}
	}
	.textarea1 {
		// width: 650rpx;
		height: 200rpx;
		background: #F5F7F9;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		
		// padding: 20rpx;\
		textarea {
			padding: 20rpx;
			font-size: 28rpx;
			line-height: 40rpx;
		}
	}
	.subtitle {
		margin-bottom: 20rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #1A1A1A;
		line-height: 42rpx;
	}
	.textarea2 {
		margin-bottom: 80rpx;
		// width: 650rpx;
		height: 100rpx;
		background: #F5F7F9;
		border-radius: 16rpx;
		input {
			padding: 20rpx;
			font-size: 28rpx;
			line-height: 40rpx;
		}
	}
	// button {
	// 	// width: 650rpx;
	// 	height: 88rpx;
	// 	background: #006FF6;
	// 	border-radius: 44rpx;
		
	// 	font-weight: bold;
	// 	font-size: 30rpx;
	// 	color: #FFFFFF;
	// 	line-height: 42rpx;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }
	
	
	.item {
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #F3F5F7;
		.left {
			font-size: 28rpx;
			color: #1A1A1A;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.name111 {
				font-weight: 400;
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 40rpx;
				margin-right: 20rpx;
			}
			.tag {
				width: 116rpx;
				height: 32rpx;
				border-radius: 4rpx;
				border: 1rpx solid #B0C3DD;
				font-weight: 400;
				font-size: 24rpx;
				color: #0F4999;
				line-height: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.right {
			display: flex;
			align-items: center;
			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #F82400;
				line-height: 40rpx;
			}
			// .avator {
			// 	width: 100rpx;
			// 	height: 100rpx;
			// 	border-radius: 50%;
			// }
			// .btn {
			// 	width: 40rpx;
			// 	height: 40rpx;
			// }

		}

	}
	
	button {
		height: 88rpx;
		background: #006FF6;
		border-radius: 44rpx;
		
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80rpx;
	}
}


.historyitem {
	padding: 30rpx 20rpx 20rpx 20rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	min-height: 196rpx;
	margin-bottom: 20rpx;
	display: flex;
	flex-direction: column;
	// justify-content: space-between;
	// align-items: ;
	.title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		justify-content: space-between;
	
		.left {
			display: flex;
			align-items: center;
			.star {
				font-weight: bold;
				font-size: 34rpx;
				color: #1A1A1A;
				line-height: 48rpx;
			}
			.split {
				background-color: #AAAAAA;
				width: 16rpx;
				height: 2rpx;
				margin: 0 12rpx;
			}
			.day{
				min-width: 100rpx;
				height: 44rpx;
				background: #0179FF;
				border-radius: 22rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
			.end{
				font-weight: bold;
				font-size: 34rpx;
				color: #1A1A1A;
				line-height: 48rpx;
			}
		}
		.right {
			 image{
				 width: 32rpx;
				 height: 32rpx;
				 margin-left: 32rpx;
			 }	
		}
	}
	.time{
		font-size: 28rpx;
		color: #7C7C7C;
		line-height: 40rpx;
		margin-bottom: 20rpx;
	}
	.bottomhis{
		text {
			font-weight: 400;
			font-size: 28rpx;
			color: #1A1A1A;
			line-height: 40rpx;
		}
	}
}
</style>
